<template>
  <div style="padding: 10px;margin: 0 auto" class="my-container">
    <div style="text-align: center;margin-top: 20px">
      <el-form ref="searchForm" :model="searchForm" :rules="rules" size="mini" :inline="true">
        <el-form-item prop="value" label="年月">
          <el-date-picker v-model="searchForm.value" type="month" placeholder="选择月" value-format="yyyy-MM"
            format="yyyy年MM月" />
        </el-form-item>
        <el-form-item>
          <el-button style="margin-left: 10px" type="primary" size="mini" plain @click="search">搜索</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!--维护工作复盘表-公司-->
    <el-card shadow="always">
      <div slot="header">
        <div style="text-align: center">{{ companyThisMonthData.month }}月份工作复盘表--公司</div>
      </div>
      <div>
        <!--本月目标-->
        <el-card v-loading="companyThisMonthTableLoading" shadow="always">
          <div slot="header" class="clearfix" style="position: relative">
            <div style="text-align: center">本月目标</div>
            <div style="position: absolute;right: 20px;top: 0">
              <el-button plan :type="curMonthTableColHidden ? 'success' : 'warning'" size="mini"
                @click="changeColHidden()">{{ curMonthTableColHidden ? '显示' : '隐藏' }}次要列</el-button>
              <el-button plan size="mini" @click="exportExcel('table1', 1)">导出</el-button>
            </div>
          </div>
          <div
            style="width: 100%;max-height: 600px;overflow: scroll;border-top: 1px solid #E6EAEE;border-left: 1px solid #E6EAEE;">
            <table ref="table1" id="table1" class="mailTable" style="min-width: 100%">
              <colgroup>
                <col :style="{ width: hiddeCol(0) ? '0px' : '120px' }">
                </col>
                <col :style="{ width: hiddeCol(1) ? '0px' : '180px' }">
                </col>
                <col :style="{ width: hiddeCol(2) ? '0px' : '120px' }">
                </col>
                <col :style="{ width: hiddeCol(3) ? '0px' : '120px' }">
                </col>
                <col :style="{ width: hiddeCol(4) ? '0px' : '120px' }">
                </col>
                <col :style="{ width: hiddeCol(5) ? '0px' : '120px' }">
                </col>
                <col :style="{ width: hiddeCol(6) ? '0px' : '120px' }">
                </col>
                <col :style="{ width: hiddeCol(7) ? '0px' : '120px' }">
                </col>
                <col :style="{ width: hiddeCol(8) ? '0px' : '120px' }">
                </col>
                <col :style="{ width: hiddeCol(9) ? '0px' : '300px' }">
                </col>
                <col :style="{ width: hiddeCol(10) ? '0px' : '300px' }">
                </col>
                <col :style="{ width: hiddeCol(11) ? '0px' : '400px' }">
                </col>
              </colgroup>
              <thead>
                <tr class="firstTr header">
                  <td class="firstTd" colspan="2">{{ companyThisMonthData.month }}月份目标/万元</td>
                  <td colspan="3">{{ companyThisMonthData.target }}万</td>
                  <td colspan="7">划分占比</td>
                </tr>
                <tr class="header_two">
                  <td class="firstTd">本月目标/万元</td>
                  <td>周期时间</td>
                  <td>本周目标/万元</td>
                  <td>成交金额/万元</td>
                  <td>本周完成率</td>
                  <td>目标划分</td>
                  <td>本周目标/万元</td>
                  <td>签约金额/万元</td>
                  <td>本周完成率</td>
                  <td>本周目标客户</td>
                  <td>本周成交客户</td>
                  <td>本周拜访客户</td>
                </tr>
              </thead>
              <tbody>
                <template v-for="(item, index) in companyThisMonthData.companyThisMonthWeekTargetVOList"
                  v-if="companyThisMonthData.companyThisMonthWeekTargetVOList && companyThisMonthData.companyThisMonthWeekTargetVOList.length > 0">
                  <tr v-for="(sale_week, i) in item.saleWeekTargetVOList">
                    <td :style="{ overflow: hiddeCol(0) ? 'hidden' : 'visible' }" v-if="index === 0 && i === 0"
                      class="firstTd col col-left" :rowspan="month_target_row_span">
                      {{ companyThisMonthData.target }}
                    </td>
                    <td :style="{ overflow: hiddeCol(1) ? 'hidden' : 'visible' }" v-if="i === 0"
                      :class="index === 0 && i === 0 ? 'col col-left' : 'col col-left2'"
                      :rowspan="item.saleWeekTargetVOList.length">{{
        item.begin_date + '~' + item.end_date
      }}
                    </td>
                    <td :style="{ overflow: hiddeCol(2) ? 'hidden' : 'visible' }" v-if="i === 0"
                      :rowspan="item.saleWeekTargetVOList.length">{{ item.target }}</td>
                    <td :style="{ overflow: hiddeCol(3) ? 'hidden' : 'visible' }" v-if="i === 0"
                      :rowspan="item.saleWeekTargetVOList.length">{{ item.contract_amount }}</td>
                    <td :style="{ overflow: hiddeCol(4) ? 'hidden' : 'visible' }" v-if="i === 0"
                      :rowspan="item.saleWeekTargetVOList.length">{{ item.completion_rate }}%</td>
                    <td :style="{ overflow: hiddeCol(5) ? 'hidden' : 'visible' }">{{ sale_week.name }}</td>
                    <td :style="{ overflow: hiddeCol(6) ? 'hidden' : 'visible' }">{{ sale_week.target }}</td>
                    <td :style="{ overflow: hiddeCol(7) ? 'hidden' : 'visible' }">{{ sale_week.contract_amount }}</td>
                    <td :style="{ overflow: hiddeCol(8) ? 'hidden' : 'visible' }">{{ sale_week.completion_rate }}%</td>
                    <td :style="{ overflow: hiddeCol(9) ? 'hidden' : 'visible' }">
                      <div style="white-space: break-spaces;"
                        v-if="sale_week.target_customer_list && sale_week.target_customer_list.length > 0">
                        <div v-for="(customer, index) in sale_week.target_customer_list" :key="index">
                          <a :href="'#C' + customer.id + ''">{{ customer.name }}</a> ({{ customer.target }})万元
                          <br v-if="index !== sale_week.target_customer_list.length - 1">
                        </div>
                      </div>
                    </td>
                    <td :style="{ overflow: hiddeCol(10) ? 'hidden' : 'visible' }">
                      <div style="white-space: break-spaces;"
                        v-if="sale_week.complete_customer_list && sale_week.complete_customer_list.length > 0">
                        <div v-for="(customer, index) in sale_week.complete_customer_list" :key="index">
                          <a :href="'#C' + customer.id + ''">{{ customer.name }}</a> ({{ customer.target }})万元
                          <br v-if="index !== sale_week.complete_customer_list.length - 1">
                        </div>
                      </div>
                    </td>
                    <td :style="{ overflow: hiddeCol(11) ? 'hidden' : 'visible', textAlign: 'left' }">
                      <div style="white-space: break-spaces;" v-if="sale_week.need_visit_customer_map">
                        <div v-for="(value, key) in sale_week.need_visit_customer_map" :key="key">
                          <span>{{ key.substring(5) + ' ' }}</span>
                          <span v-for="(customer, index) in value" :key="key + '_' + index"
                            :class="customer.visited ? 'text-green' : ''">
                            <a :href="'#C' + customer.id + ''">{{ customer.name + (index === value.length - 1 ? '' : '、')
                              }}</a>
                          </span>
                        </div>
                      </div>
                    </td>
                  </tr>
                </template>
                <tr
                  v-if="!companyThisMonthData.companyThisMonthWeekTargetVOList || (companyThisMonthData.companyThisMonthWeekTargetVOList && companyThisMonthData.companyThisMonthWeekTargetVOList.length === 0)">
                  <td class="firstTd" colspan="12">无数据</td>
                </tr>
                <tr>
                  <td colspan="2" class="firstTd col col-left">汇总</td>
                  <td colspan="10">
                    总目标额度：{{
        companyThisMonthData.target + '万'
      }}&nbsp;&nbsp;总成交额度:{{
          companyThisMonthData.contract_amount + '万'
        }}&nbsp;&nbsp;总完成率：{{ companyThisMonthData.completion_rate + '%' }}
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </el-card>
        <!--下月计划-->
        <el-card v-loading="companyNextMonthTableLoading" shadow="always">
          <div slot="header" class="clearfix" style="position: relative">
            <div style="text-align: center">下月计划</div>
            <div style="position: absolute;right: 20px;top: 0">
              <el-button plan size="mini" @click="exportExcel('table2', 2)">导出</el-button>
            </div>
          </div>
          <div style="width: 100%;overflow-x: scroll;">
            <table id="table2" class="mailTable" style="width: 100%">
              <tr class="firstTr header">
                <td class="firstTd" colspan="2">{{ companyNextMonthData.month }}月份目标/万元</td>
                <td>{{ companyNextMonthData.target }}</td>
                <td>目标分解</td>
              </tr>
              <tr class="header_two">
                <td class="firstTd" style="width: 20%">下月目标/万元</td>
                <td style="width: 20%">周期时间</td>
                <td style="width: 10%">本周目标/万元</td>
                <td style="width: 50%">目标客户组成</td>
              </tr>
              <tr v-for="(week, index) in companyNextMonthData.weekCustomerVOList"
                v-if="companyNextMonthData.weekCustomerVOList && companyNextMonthData.weekCustomerVOList.length">
                <td v-if="index === 0" class="firstTd" rowspan="4">{{ companyNextMonthData.target }}</td>
                <td>{{ week.begin_date + '~' + week.end_date }}</td>
                <td>{{ week.target }}</td>
                <td>
                  <div v-if="week.customerTargetVOList && week.customerTargetVOList.length">
                    <span v-for="(customer, i) in week.customerTargetVOList">
                      {{
        customer.name + '（' + customer.target_quota + '）' + (i !== week.customerTargetVOList.length - 1 ?
          '、' :
          '')
      }}
                    </span>
                  </div>
                </td>
              </tr>
              <tr
                v-if="!companyNextMonthData.weekCustomerVOList || (companyNextMonthData.weekCustomerVOList && companyNextMonthData.weekCustomerVOList.length === 0)">
                <td class="firstTd" colspan="4">暂无数据</td>
              </tr>
              <tr>
                <td colspan="2" class="firstTd">汇总</td>
                <td colspan="2">
                  总目标额度：{{ companyNextMonthData.target }}
                </td>
              </tr>
            </table>
          </div>
        </el-card>
      </div>
    </el-card>
    <!--客户拜访跟进动作推进表-->
    <el-card shadow="always">
      <div slot="header" style="position: relative">
        <div style="text-align: center">客户拜访跟进动作推进表</div>
        <div style="position: absolute;right: 20px;top: 0">
          <el-button plan size="mini" @click="exportExcel('table3', 3)">导出</el-button>
        </div>
      </div>
      <el-form :model="customerTableSearchForm" :inline="true" size="mini">
        <el-form-item label="客户名称" prop="name">
          <el-input v-model="customerTableSearchForm.name" placeholder="请输入客户名称" clearable />
        </el-form-item>
        <el-form-item label="所属" prop="type">
          <el-select v-model="customerTableSearchForm.type" placeholder="请输入选择客户所属" clearable>
            <el-option :value="1" label="公司盘" />
            <el-option :value="2" label="个人盘" />
          </el-select>
        </el-form-item>
        <el-form-item label="维护人" prop="maintain_user_id">
          <el-select v-model="customerTableSearchForm.maintain_user_id" placeholder="请选择维护人" clearable filterable>
            <el-option v-for="user in userArr" :key="user.id" :label="user.name" :value="user.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="预估签单金额">
          <el-input v-model="customerTableSearchForm.sign_amount" placeholder="请输入预估签单金额" clearable />
        </el-form-item>
        <el-form-item label="预估签单时间">
          <el-date-picker type="date" placeholder="选择日期" v-model="customerTableSearchForm.sign_date"
            style="width: 100%;"></el-date-picker>
        </el-form-item>
        <el-form-item label="预估执行金额">
          <el-input v-model="customerTableSearchForm.imply_amount" placeholder="请输入预估执行金额" clearable />
        </el-form-item>
        <el-form-item label="预估执行时间">
          <el-date-picker type="date" placeholder="选择日期" v-model="customerTableSearchForm.imply_date"
            style="width: 100%;"></el-date-picker>
        </el-form-item>
        <el-form-item label="预估回款金额">
          <el-input v-model="customerTableSearchForm.pay_amount" placeholder="请输入预估回款金额" clearable />
        </el-form-item>
        <el-form-item label="预估回款时间">
          <el-date-picker type="date" placeholder="选择日期" v-model="customerTableSearchForm.pay_date"
            style="width: 100%;"></el-date-picker>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" plain size="mini" @click="customerTableSearch">搜索</el-button>
          <el-button type="info" plain size="mini" @click="customerTableReset">重置</el-button>
        </el-form-item>
      </el-form>
      <div style="overflow-x: auto" class="table-container">
        <table id="table3" v-loading="tableLoading" class="mailTable" height="450">
          <thead class="sticky-header">
          <tr class="firstTr header_two tHeader" >
            <td class="firstTd" style="width: 8%">客户名称</td>
            <td style="width: 5%">客户划分</td>
            <td style="width: 4%">维护人</td>
            <td style="width: 4%">预估签单额</td>
            <td style="width: 4%">成交评估</td>
            <td style="width: 8%">预估签单时间</td>
            <td style="width: 4%">签约现金</td>
            <td style="width: 5%">签约置换金额</td>
            <td style="width: 8%">预估执行时间</td>
            <td style="width: 4%">执行金额</td>
            <td style="width: 8%">预估回款时间</td>
            <td style="width: 4%">回款金额</td>
            <td style="width: 200px">未签单原因</td>
            <td style="width: 4%">拜访次数</td>
            <td style="width: 200px">推进进度</td>
            <td style="width: 8%">下次跟进时间</td>
            <td style="width: 7%">
              <el-tooltip effect="dark" content="红色为未确认收到，绿色为确认收到" placement="top">
                <span><i class="el-icon-question" />批注</span>
              </el-tooltip>
            </td>
          </tr>
          </thead>

          <template v-for="customer in filterCompanyAdvanceList"
            v-if="filterCompanyAdvanceList && filterCompanyAdvanceList.length">
            <tr v-for="(record, index) in customer.estimateRecordVOList"
              v-if="customer.estimateRecordVOList && customer.estimateRecordVOList.length" :id="'C' + customer.id">
              <td v-if="index === 0"
                :class="'firstTd ' + (customer.customerFollowVO ? (customer.next_visit_time ? 'name-green' : 'name-blue') : '')"
                :rowspan="customer.estimateRecordVOList.length">
                {{ customer.name }}
              </td>
              <td v-if="index === 0" :rowspan="customer.estimateRecordVOList.length">
                {{ customer.type === 1 ? '公司' : '个人' }}
              </td>
              <td v-if="index === 0" :rowspan="customer.estimateRecordVOList.length">
                {{ customer.maintenance_staff_name }}<br>
                <el-button v-if="customer.type === 1" v-permission="'fill_and_edit_predict'" size="mini" type="text"
                  @click="openEstimateForm(customer, false)">
                  添加预估
                </el-button>
              </td>
              <td>{{ record.quota ? record.quota + '万' : '未填写' }}</td>
              <td>{{ record.transaction_evaluation ? getPercentageStr(record.transaction_evaluation) : '未填写' }}</td>
              <td>{{ record.begin_date }}<br>~<br> {{ record.end_date }}<br>
                <el-button v-if="record.target_record_id" v-permission="'fill_and_edit_predict'" size="mini" type="text"
                  @click="openEstimateForm(customer, true, record)">
                  修改预估
                </el-button>
              </td>
              <td>{{ record.newest_contract_pay_cash_amount }}元</td>
              <td>{{ record.newest_contract_displace_amount }}元</td>

              <td>{{ record.implement_begin_date }}<br>~<br> {{ record.implement_end_date }}<br>
                <el-button v-if="record.target_record_id" v-permission="'fill_and_edit_predict'" size="mini" type="text"
                  @click="openEstimateForm(customer, true, record)">
                  修改预估
                </el-button>
              </td>
              <td>{{ record.newest_implement_amount ? record.newest_implement_amount + '万' : '未填写' }}</td>

              <td>{{ record.payment_begin_date }}<br>~<br> {{ record.payment_end_date }}<br>
                <el-button v-if="record.target_record_id" v-permission="'fill_and_edit_predict'" size="mini" type="text"
                  @click="openEstimateForm(customer, true, record)">
                  修改预估
                </el-button>
              </td>
              <td>{{ record.newest_payment_amount ? record.newest_payment_amount + '万' : '未填写' }}</td>

              <td style="position: relative">
                <div style="text-align: right;position: absolute;top:5px;right: 5px">
                  <el-button v-show="!record.can_edit" v-permission="'fill_reason'" size="mini" type="text"
                    @click="record.can_edit = true">填写
                  </el-button>
                  <el-button v-show="record.can_edit" v-permission="'fill_reason'" size="mini" type="text"
                    @click="saveFill(record)">保存
                  </el-button>
                  <el-button v-show="record.can_edit" v-permission="'fill_reason'" size="mini" type="text"
                    @click="cancelFill(record)">取消
                  </el-button>
                </div>
                <div style="height: 28px" />
                <div v-show="record.can_edit">
                  <el-input v-model="record.fill_text" type="textarea" placeholder="请输入未签单原因" />
                </div>
                <div v-show="!record.can_edit">
                  {{ record.reasons_for_not_cooperating ? record.reasons_for_not_cooperating : '未填写' }}
                </div>
              </td>
              <td v-if="index === 0" :rowspan="customer.estimateRecordVOList.length">{{ customer.visit_count }}次</td>
              <td v-if="index === 0" :rowspan="customer.estimateRecordVOList.length">
                <div v-if="customer.customerFollowVO">
                  <el-tooltip placement="top">
                    <div slot="content">
                      对接人：{{ customer.customerFollowVO.opposite_person }}<br>
                      联系方式:{{ customer.customerFollowVO.phone }}<br>
                      拜访目的：{{ customer.customerFollowVO.reasons_for_recommendation }}<br>
                      拜访结果：{{ customer.customerFollowVO.achievements }}<br>
                      推进动作：<span
                        v-if="customer.customerFollowVO.propelling_action_name && customer.customerFollowVO.propelling_action_name.length > 0">
                        {{ customer.customerFollowVO.propelling_action_name.join(',') }}<br>
                      </span>
                      <span v-else>
                        暂无<br>
                      </span>
                      推荐资源：<span
                        v-if="customer.customerFollowVO.recommend_resource_name && customer.customerFollowVO.recommend_resource_name.length > 0">
                        {{ customer.customerFollowVO.recommend_resource_name.join(',') }}<br>
                      </span>
                      <span v-else>暂无<br></span>
                    </div>
                    <div>
                      日期：{{ customer.customerFollowVO.follow_time }}
                    </div>
                  </el-tooltip>
                </div>
                <div v-if="!customer.customerFollowVO">
                  暂无跟进记录
                </div>
                <div>
                  <el-button v-if="customer.type === 1" v-permission="'company_manage'" type="text"
                    style="text-decoration: underline" @click="showAddDialogVisible = true; tmpCustomerId = customer.id">添加
                  </el-button>
                  <el-button type="text" style="text-decoration: underline"
                    @click="visitRecordDialogVisible = true; tmpCustomerId = customer.id">历史
                  </el-button>
                </div>
              </td>
              <td v-if="index === 0" :rowspan="customer.estimateRecordVOList.length">
                <div>
                  <el-date-picker v-if="customer.edit_date" v-model="customer.next_visit_time" type="date"
                    placeholder="选择日期" value-format="yyyy-MM-dd" format="yyyy年MM月dd日" size="mini" style="width: 160px"
                    :clearable="false" />
                  <span v-else>
                    {{ customer.next_visit_time ? customer.next_visit_time : '暂无' }}<br>
                  </span>
                </div>
                <div>
                  <el-input v-if="customer.edit_date" v-model="customer.purpose" style="margin-top: 5px" type="textarea"
                    placeholder="请输入拜访目的" />
                  <span v-else style="white-space: pre-wrap">
                    {{ customer.purpose ? customer.purpose : '暂无拜访目的' }}<br>
                  </span>
                </div>
                <div>
                  <el-button v-if="customer.type === 1" v-show="!customer.edit_date"
                    v-permission="'fill_and_edit_next_visit_date'" size="mini" type="text"
                    @click="customer.edit_date = true; tmpDate = customer.next_visit_time; tmpPurpose = customer.purpose">{{
        customer.next_visit_time ? '修改' : '增加' }}
                  </el-button>
                  <el-button v-if="customer.type === 1" v-show="customer.edit_date"
                    v-permission="'fill_and_edit_next_visit_date'" size="mini" type="text"
                    @click="addNextVisitDate(customer)">保存
                  </el-button>
                  <el-button v-if="customer.type === 1" v-show="customer.edit_date"
                    v-permission="'fill_and_edit_next_visit_date'" size="mini" type="text"
                    @click="customer.edit_date = false; customer.next_visit_time = tmpDate; customer.purpose = tmpPurpose">取消
                  </el-button>
                </div>
              </td>
              <td v-if="index === 0" :rowspan="customer.estimateRecordVOList.length">
                <div v-if="customer.lastCustomerVisitComments">
                  <el-tooltip effect="dark" :content="customer.lastCustomerVisitComments.comments" placement="top">
                    <div class="comments"
                      :class="customer.lastCustomerVisitComments.received_or_not ? 'text-green' : 'text-red'">
                      {{
        customer.lastCustomerVisitComments.comments
      }}
                    </div>
                  </el-tooltip>
                </div>
                <div v-else>暂无</div>
                <div style="width: 70px;margin: 0 auto">
                  <el-button v-permission="'fill_comments'" type="text" size="mini"
                    @click="addVisitComments(customer.id, customer)">添加
                  </el-button>
                  <el-button type="text" size="mini" @click="showVisitCommentsHistoryDialog(customer.id)">历史
                  </el-button>
                </div>
              </td>
            </tr>
            <tr
              v-if="!customer.estimateRecordVOList || (customer.estimateRecordVOList && customer.estimateRecordVOList.length === 0)">
              <td
                :class="'firstTd ' + (customer.customerFollowVO ? (customer.next_visit_time ? 'name-green' : 'name-blue') : '')">
                {{ customer.name }}</td>
              <td>{{ customer.type === 1 ? '公司' : '个人' }}</td>
              <td>
                {{ customer.maintenance_staff_name }}<br>
                <el-button v-if="customer.type === 1" v-permission="'fill_and_edit_predict'" size="mini" type="text"
                  @click="openEstimateForm(customer, false)">
                  添加预估
                </el-button>
              </td>
              <td>暂无</td>
              <td>暂无</td>
              <td>暂无</td>
              <td>暂无</td>
              <td>暂无</td>

              <td>暂无</td>
              <td>暂无</td>
              <td>暂无</td>
              <td>暂无</td>

              <td>无签约预估记录</td>
              <td>{{ customer.visit_count }}次</td>
              <td>
                <div v-if="customer.customerFollowVO">
                  <el-tooltip placement="top">
                    <div slot="content">
                      对接人：{{ customer.customerFollowVO.opposite_person }}<br>
                      联系方式:{{ customer.customerFollowVO.phone }}<br>
                      拜访目的：{{ customer.customerFollowVO.reasons_for_recommendation }}<br>
                      拜访结果：{{ customer.customerFollowVO.achievements }}<br>
                      推进动作：<span
                        v-if="customer.customerFollowVO.propelling_action_name && customer.customerFollowVO.propelling_action_name.length > 0">
                        {{ customer.customerFollowVO.propelling_action_name.join(',') }}<br>
                      </span>
                      <span v-else>
                        暂无<br>
                      </span>
                      推荐资源：<span
                        v-if="customer.customerFollowVO.recommend_resource_name && customer.customerFollowVO.recommend_resource_name.length > 0">
                        {{ customer.customerFollowVO.recommend_resource_name.join(',') }}<br>
                      </span>
                      <span v-else>暂无<br></span>
                    </div>
                    <div>
                      日期：{{ customer.customerFollowVO.follow_time }}
                    </div>
                  </el-tooltip>
                </div>
                <div v-if="!customer.customerFollowVO">
                  暂无跟进记录
                </div>
                <el-button v-if="customer.type === 1" v-permission="'company_manage'" type="text"
                  style="text-decoration: underline" @click="showAddDialogVisible = true; tmpCustomerId = customer.id">添加
                </el-button>
                <el-button type="text" style="text-decoration: underline"
                  @click="visitRecordDialogVisible = true; tmpCustomerId = customer.id">历史
                </el-button>
              </td>
              <td>
                <div>
                  <el-date-picker v-if="customer.edit_date" v-model="customer.next_visit_time" type="date"
                    placeholder="选择日期" value-format="yyyy-MM-dd" format="yyyy年MM月dd日" size="mini" style="width: 160px"
                    :clearable="false" />
                  <span v-else>
                    {{ customer.next_visit_time ? customer.next_visit_time : '暂无' }}<br>
                  </span>
                </div>
                <div>
                  <el-input v-if="customer.edit_date" v-model="customer.purpose" style="margin-top: 5px" type="textarea"
                    placeholder="请输入拜访目的" />
                  <span v-else style="white-space: pre-wrap">
                    {{ customer.purpose ? customer.purpose : '暂无拜访目的' }}<br>
                  </span>
                </div>
                <div>
                  <el-button v-if="customer.type === 1" v-show="!customer.edit_date"
                    v-permission="'fill_and_edit_next_visit_date'" size="mini" type="text"
                    @click="customer.edit_date = true; tmpDate = customer.next_visit_time; tmpPurpose = customer.purpose">{{
        customer.next_visit_time ? '修改' : '增加' }}
                  </el-button>
                  <el-button v-if="customer.type === 1" v-show="customer.edit_date"
                    v-permission="'fill_and_edit_next_visit_date'" size="mini" type="text"
                    @click="addNextVisitDate(customer)">保存
                  </el-button>
                  <el-button v-if="customer.type === 1" v-show="customer.edit_date"
                    v-permission="'fill_and_edit_next_visit_date'" size="mini" type="text"
                    @click="customer.edit_date = false; customer.next_visit_time = tmpDate; customer.purpose = tmpPurpose">取消
                  </el-button>
                </div>
              </td>
              <td>
                <div v-if="customer.lastCustomerVisitComments">
                  <el-tooltip effect="dark" :content="customer.lastCustomerVisitComments.comments" placement="top">
                    <div class="comments"
                      :class="customer.lastCustomerVisitComments.received_or_not ? 'text-green' : 'text-red'">
                      {{
        customer.lastCustomerVisitComments.comments
      }}
                    </div>
                  </el-tooltip>
                </div>
                <div v-else>暂无</div>
                <div style="width: 70px;margin: 0 auto">
                  <el-button v-permission="'fill_comments'" type="text" size="mini"
                    @click="addVisitComments(customer.id, customer)">添加
                  </el-button>
                  <el-button type="text" size="mini" @click="showVisitCommentsHistoryDialog(customer.id)">历史
                  </el-button>
                </div>
              </td>
            </tr>
          </template>
          <tr v-if="!filterCompanyAdvanceList || (filterCompanyAdvanceList && filterCompanyAdvanceList.length === 0)">
            <td class="firstTd" colspan="12">暂无客户</td>
          </tr>
        </table>
      </div>
    </el-card>
    <visit-record-dialog :center-dialog-visible="visitRecordDialogVisible" :customer-id="tmpCustomerId"
      :dialog-width="dialogWidth" @close="closeVisitRecordDialog" />
    <visit-comments-history-dialog ref="VisitCommentsHistoryDialog" :customer-id="tmpCustomerId"
      @close="closeVisitCommentsHistoryDialog" />
    <add-customer-follow-dialog :customer-id="tmpCustomerId" :follow-form-visible="showAddDialogVisible"
      @close="closeAddDialog" @save="saveFollow" />
    <el-dialog :title="estimateForm.record_id ? '添加签约' : '添加签约'" :visible.sync="estimateDialogVisible" width="50%" center
      @close="closeEstimateDialog">
      <el-form ref="estimateForm" label-width="130px" size="mini" :model="estimateForm" :rules="estimateFormRules">
        <el-row>
          <el-col :span="12">
            <el-form-item label="预估签约时间" prop="week_id" v-loading="weekSelectLoading">
              <el-select v-model="estimateForm.week_id" placeholder="请选择时间" filterable
                style="margin: 0 auto;width: 100%">
                <el-option v-for="week in weekArr" :key="week.id" :value="week.id"
                  :label="week.begin_date + '~' + week.end_date"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="成交预估" prop="transaction_evaluation">
              <el-select v-model="estimateForm.transaction_evaluation" style="width: 100%" placeholder="请输入签约预估">
                <el-option :value="1" label="100%"></el-option>
                <el-option :value="0.8" label="80%"></el-option>
                <el-option :value="0.6" label="60%"></el-option>
                <el-option :value="0.4" label="40%"></el-option>
                <el-option :value="0.2" label="20%"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="quota">
              <span slot="label">
                <el-tooltip slot="label" placement="top" content="签约额数据会和工作复盘中的目标同步">
                  <span>预估签约额<i class="el-icon-question"></i></span>
                </el-tooltip>
              </span>
              <el-input v-model="estimateForm.quota" placeholder="请输入预估签约额">
                <template slot="append">元</template>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="estimateDialogVisible = false" size="mini">关 闭</el-button>
        <el-button type="primary" @click="addEstimate" size="mini">保 存</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  fillAnnotation,
  fillReasonsForNotCooperating,
  queryCompanyMonthByMonth,
  queryCompanyMonthPlanByMonth
} from '@/api/workbench/companyMonth'
import { addNextVisitDate, companyAdvanceList } from '@/api/customer/customer'
import { multiply } from '@/utils/amount'
import VisitRecordDialog from '@/views/business/annual_plan/componets/visitRecordDialog'
import { list_by_role_code } from '@/api/system/user'
import { cloneDeep } from 'lodash'
import VisitCommentsHistoryDialog from '@/views/business/annual_plan/componets/VisitCommentsHistoryDialog'
import XLSX from 'xlsx'
import { formatDateByFmt } from '@/utils/util'
import AddCustomerFollowDialog from '@/views/business/customer/components/AddCustomerFollowDialog'
import { addSigningTime, addVisitRecord } from '@/api/workbench/saleMonth'
import { list } from '@/api/workbench/week'

export default {
  name: 'CompanyMonthTarget',
  components: { VisitCommentsHistoryDialog, VisitRecordDialog, AddCustomerFollowDialog },
  data() {
    return {
      visitRecordDialogVisible: false,
      companyThisMonthData: {},
      companyThisMonthTableLoading: false,
      companyNextMonthData: {},
      companyNextMonthTableLoading: false,
      companyAdvanceList: [],
      filterCompanyAdvanceList: [],
      tmpCustomerId: null,
      searchForm: {
        value: null,
        year: null,
        month: null,
        page: 1,
        page_size: 20
      },
      rules: {
        value: [
          { required: true, message: '请选择年月', trigger: 'change' }
        ]
      },
      tableLoading: false,
      customerTableSearchForm: {
        name: null,
        type: null,
        maintain_user_id: null,
        sign_amount: null,
        sign_date: null,
        imply_amount: null,
        imply_date: null,
        pay_amount: null,
        pay_date: null
      },
      userArr: [],
      showAddDialogVisible: false,
      btn_show: false,
      tmpPurpose: null,
      tmpDate: null,
      estimateForm: {
        record_id: null,
        target_record_id: null,
        id: null,
        week_id: null,
        transaction_evaluation: null,
        quota: null
      },
      estimateFormRules: {
        week_id: [{ required: true, message: '请选择时间', trigger: 'change' }],
        transaction_evaluation: [{ required: true, message: '请选择成交预估', trigger: 'change' }],
        quota: [{ required: true, message: '请输入预估签单额', trigger: 'blur' }]
      },
      weekSelectLoading: false,
      estimateDialogVisible: false,
      weekArr: [],
      dialogWidth: 0,

      curMonthTableHiddenColIndex: [0, 3, 4, 6, 7, 8],
      curMonthTableColHidden: true
    }
  },
  computed: {
    month_target_row_span() {
      let count = 0
      if (this.companyThisMonthData.companyThisMonthWeekTargetVOList && this.companyThisMonthData.companyThisMonthWeekTargetVOList.length) {
        this.companyThisMonthData.companyThisMonthWeekTargetVOList.forEach(item => {
          if (item.saleWeekTargetVOList && item.saleWeekTargetVOList.length) {
            count += item.saleWeekTargetVOList.length
          }
        })
      }
      return count
    }
  },
  created() {
    const now = new Date()
    let str = ''
    str += now.getFullYear()
    this.searchForm.year = now.getFullYear()
    const month = now.getMonth() + 1
    this.searchForm.month = month
    str += '-'
    if (month >= 10) {
      str += month
    } else {
      str = str + '0' + month
    }
    // 通过权限数组检查是否显示标签页
    this.$store.dispatch('permission/checkRights', {
      names: ['company_manage'],
      rights: this.$store.getters.btnRights
    }).then(res => {
      this.btn_show = res[0]
    })
    this.searchForm.value = str
    this.getCompanyThisMonthData()
    this.getCompanyAdvanceList()
    this.getCompanyNextMonthData()
    this.initSaleArr()
  },
  mounted: function () {
    const that = this
    this.$nextTick(() => { // 页面渲染完成后的回调
      let clientWidth = `${document.documentElement.clientWidth}`
      this.dialogWidth = (clientWidth * 0.8)
      // setTimeout(()=>{
      //   const $header_two = that.$refs.table1.getElementsByClassName("header_two")[0].children
      //  console.log($header_two)
      //   for(var i in $header_two) {
      //     if($header_two[i]) {
      //       $header_two[i].width = $header_two[i].offsetWidth
      //     }
      //     console.log($header_two[i].style)
      //     console.log($header_two[i].offsetWidth)
      //     // $header_two[i].style.width = $header_two[i].offsetWidth
      //   }

      // },3000)
    });
    //添加监听滚动条事件
    // window.addEventListener('scroll', this.handleScroll, true)
  },
  destroyed() { //移除（跳转页面后移除）
    window.removeEventListener('scroll', this.handleScroll, true)
  },
  methods: {
    handleScroll(e) {
      //content-box 为包裹表格的外层盒子
      let heightTop = document.getElementsByClassName("header_two")[0].scrollTop //距离顶部高度
      // if (heightTop >= 1) { //表头到达页面顶部固定表头
      //   // 146 为距离顶部多少时开始吸顶，即吸顶距离
      //   let top = 500//heightTop - 146
      //   document.getElementsByClassName('tHeader')[0].style.position = 'fixed'
      //   document.getElementsByClassName('tHeader')[0].style.zIndex = '9999'
      //   document.getElementsByClassName('tHeader')[0].style.bottom = `${top}px`
      // } else {
      //   document.getElementsByClassName('tHeader')[0].style.bottom = ''
      //   document.getElementsByClassName('tHeader')[0].style.zIndex = ''
      //   document.getElementsByClassName('tHeader')[0].style.position = ''
      // }
    },
    changeColHidden() {
      this.curMonthTableColHidden = !this.curMonthTableColHidden;
    },
    hiddeCol(colIndex) {
      return (this.curMonthTableColHidden && this.curMonthTableHiddenColIndex.indexOf(colIndex) > -1);
    },
    search() {
      this.$refs.searchForm.validate(flag => {
        if (flag) {
          var split = this.searchForm.value.split('-')
          this.searchForm.year = split[0]
          this.searchForm.month = split[1]
          this.getCompanyThisMonthData()
          this.getCompanyAdvanceList()
          this.getCompanyNextMonthData()
        }
      })
    },
    getCompanyThisMonthData() {
      this.companyThisMonthTableLoading = true
      queryCompanyMonthByMonth(this.searchForm).then(res => {
        this.companyThisMonthTableLoading = false
        if (res.data.companyThisMonthWeekTargetVOList) {
          res.data.companyThisMonthWeekTargetVOList.forEach(item => {
            if (item.saleWeekTargetVOList) {
              item.saleWeekTargetVOList.forEach(week => {
                const need_visit_customer_map = {}
                const map = new Map()
                if (week.need_visit_customer_list && week.need_visit_customer_list.length) {
                  week.need_visit_customer_list.forEach(customer => {
                    // 前台处理 对同一天的数据进行合并
                    if (map.has(customer.next_visit_time)) {
                      map.get(customer.next_visit_time).push(customer)
                    } else {
                      const arr = [customer]
                      map.set(customer.next_visit_time, arr)
                    }
                  })
                }
                map.forEach((value, key) => {
                  need_visit_customer_map[key] = value
                })
                week.need_visit_customer_map = need_visit_customer_map
              })
            }
          })
        }
        this.companyThisMonthData = res.data
      })
    },
    getCompanyNextMonthData() {
      this.companyNextMonthTableLoading = true
      queryCompanyMonthPlanByMonth(this.searchForm).then(res => {
        this.companyNextMonthTableLoading = false
        this.companyNextMonthData = res.data
      })
    },
    getCompanyAdvanceList() {
      this.tableLoading = true
      companyAdvanceList(this.searchForm).then(res => {
        this.tableLoading = false
        this.companyAdvanceList = res.data
        if (this.companyAdvanceList && this.companyAdvanceList.length) {
          this.companyAdvanceList.forEach(item => {
            this.$set(item, 'edit_date', false)
            if (item.estimateRecordVOList && item.estimateRecordVOList.length) {
              item.estimateRecordVOList.forEach(record => {
                this.$set(record, 'fill_text', record.reasons_for_not_cooperating)
                this.$set(record, 'can_edit', false)
              })
            }
          })
        }
        this.filterCompanyAdvanceList = cloneDeep(this.companyAdvanceList)
      })
    },
    getPercentageStr(num) {
      if (num) {
        return multiply(num, 100) + '%'
      } else {
        return ''
      }
    },
    closeVisitRecordDialog() {
      this.visitRecordDialogVisible = false
      this.tmpCustomerId = null
    },
    cancelFill(record) {
      record.can_edit = false
      record.fill_text = record.reasons_for_not_cooperating
    },
    saveFill(record) {
      if (record.fill_text) {
        const arr = [record]
        arr.push({
          customer_estimate_record_id: record.id,
          reasons_for_not_cooperating: record.fill_text
        })
        const loading = this.$loading({
          lock: true,
          text: '保存中',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        })
        fillReasonsForNotCooperating(arr).then(res => {
          record.reasons_for_not_cooperating = record.fill_text
          record.can_edit = false
          loading.close()
        }).catch(() => {
          loading.close()
        })
      } else {
        this.$message.error('未签单原因不能为空')
      }
    },
    initSaleArr() {
      list_by_role_code({ code: 'Salesperson' }).then(res => {
        this.userArr = res.data.map(item => {
          return {
            id: item.id,
            name: item.name
          }
        })
      })
    },
    customerTableSearch() {
      let tmp = this.companyAdvanceList
      if (this.customerTableSearchForm.name) {
        tmp = tmp.filter(item => item.name.indexOf(this.customerTableSearchForm.name) > -1)
      }
      if (this.customerTableSearchForm.type) {
        tmp = tmp.filter(item => item.type === this.customerTableSearchForm.type)
      }
      if (this.customerTableSearchForm.maintain_user_id) {
        tmp = tmp.filter(item => item.maintenance_staff_id === this.customerTableSearchForm.maintain_user_id)
      }
      if (this.customerTableSearchForm.sign_amount) {

      }
      if (this.customerTableSearchForm.sign_date) {

      }
      if (this.customerTableSearchForm.imply_amount) {

      }
      if (this.customerTableSearchForm.imply_date) {

      }
      if (this.customerTableSearchForm.pay_amount) {

      }
      if (this.customerTableSearchForm.pay_date) {

      }
      this.filterCompanyAdvanceList = cloneDeep(tmp)
    },
    customerTableReset() {
      this.customerTableSearchForm = {
        name: null,
        type: null,
        maintain_user_id: null,
        sign_amount: null,
        sign_date: null,
        imply_amount: null,
        imply_date: null,
        pay_amount: null,
        pay_date: null
      }
      this.filterCompanyAdvanceList = cloneDeep(this.companyAdvanceList)
    },
    closeVisitCommentsHistoryDialog() {
      this.tmpCustomerId = null
    },
    showVisitCommentsHistoryDialog(id) {
      this.tmpCustomerId = id
      this.$nextTick(() => {
        this.$refs.VisitCommentsHistoryDialog.open()
      })
    },
    addVisitComments(id, customer) {
      this.$prompt('请输入批注', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputType: 'textarea',
        inputValidator(val) {
          if (val) {
            return true
          } else {
            return '批注不能为空'
          }
        }
      }).then(({ value }) => {
        const loading = this.$loading({
          lock: true,
          text: '提交中',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        })
        fillAnnotation({
          customer_id: id,
          comments: value
        }).then(res => {
          if (customer.lastCustomerVisitComments) {
            customer.lastCustomerVisitComments.comments = value
            customer.lastCustomerVisitComments.received_or_not = false
          } else {
            customer.lastCustomerVisitComments = {
              comments: value,
              received_or_not: false
            }
          }
          loading.close()
          this.$message.success('添加成功')
        }).catch(() => {
          loading.close()
        })
      }).catch(() => {

      })
    },
    /**
     * 导出excel
     * @param tableId 元素id
     * @param type
     */
    exportExcel(tableId, type) {
      var table_elt = document.getElementById(tableId)
      var workbook = XLSX.utils.table_to_book(table_elt)
      var ws = workbook.Sheets['Sheet1']
      XLSX.utils.sheet_add_aoa(ws, [])
      XLSX.writeFile(workbook, (type === 1 ? '本月目标' : type === 2 ? '下月计划' : '客户拜访跟进动作推进表') + (formatDateByFmt(new Date(), 'yyyyMMddhhmmss') + Math.floor(Math.random() * (1000000 - 1) + 1)) + '.xlsx')
    },
    closeAddDialog() {
      this.tmpCustomerId = null
      this.showAddDialogVisible = false
    },
    saveFollow(data) {
      const loading = this.$loading({
        lock: true,
        text: '保存中',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      addVisitRecord(data).then(res => {
        this.$message.success('添加成功')
        this.tmpCustomerId = null
        this.showAddDialogVisible = false
        this.getCompanyAdvanceList()
        loading.close()
      }).catch(() => {
        loading.close()
      })
    },
    addNextVisitDate(customer) {
      if (!customer.next_visit_time) {
        this.$message.error('请选择下次跟进时间')
        return
      }
      const loading = this.$loading({
        lock: true,
        text: '保存中',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      addNextVisitDate({
        id: customer.id,
        date: customer.next_visit_time,
        purpose: customer.purpose
      }).then(res => {
        loading.close()
        customer.edit_date = false
        this.$message.success('添加成功')
      }).catch(() => {
        loading.close()
      })
    },
    closeEstimateDialog() {
      this.estimateForm = {
        record_id: null,
        target_record_id: null,
        id: null,
        week_id: null,
        transaction_evaluation: null,
        quota: null
      }
      this.$nextTick(() => {
        this.$refs.estimateForm.clearValidate()
      })
    },
    openEstimateForm(customer, flag, record) {
      console.log(record)
      this.estimateDialogVisible = true
      this.estimateForm.id = customer.id
      if (flag) {
        this.estimateForm.quota = multiply(record.quota, 10000)
        this.estimateForm.transaction_evaluation = record.transaction_evaluation
        this.estimateForm.record_id = record.id
        this.estimateForm.target_record_id = record.target_record_id
        this.estimateForm.week_id = record.week_id
      } else {
        this.estimateForm.record_id = null
        this.estimateForm.target_record_id = null
        this.estimateForm.week_id = null
        this.estimateForm.quota = null
        this.estimateForm.transaction_evaluation = null
      }
      this.initWeekList(customer.id, this.estimateForm.record_id)
    },
    addEstimate() {
      this.$refs.estimateForm.validate(flag => {
        if (flag) {
          const loading = this.$loading({
            lock: true,
            text: '保存中',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.7)'
          })
          addSigningTime(this.estimateForm).then(res => {
            this.estimateDialogVisible = false
            this.$message.success('操作成功')
            this.getCompanyAdvanceList()
            loading.close()
          }).catch(() => {
            loading.close()
          })
        }
      })
    },
    initWeekList(customer_id, record_id) {
      this.weekSelectLoading = true
      list({ customer_id, record_id }).then(res => {
        this.weekSelectLoading = false
        this.weekArr = res.data
      }).catch(() => {
        this.weekSelectLoading = false
      })
    }
  }
}
</script>

<style scoped>
.el-card {
  margin: 15px 0 15px 0;
}

.mailTable {
  width: 100%;
  font-size: 14px;
  margin: 0 auto 10px auto;
  border-collapse: collapse;
}

.mailTable tr td {
  height: 35px;
  line-height: 20px;
  box-sizing: border-box;
  padding: 0 10px;
  border-bottom: 1px solid #E6EAEE;
  border-right: 1px solid #E6EAEE;
  text-align: center;
  white-space: nowrap;
}

.firstTr td {
  border-top: 1px solid #E6EAEE;
}

.firstTd {
  border-left: 1px solid #E6EAEE;
}

.mailTable tr td.column {
  text-align: center;
  /*border: 1px solid #8c939d;*/
}

.header {
  text-align: center;
  font-size: 18px;
  font-weight: bold;
  margin: 10px auto;
}

.header_two {
  text-align: center;
  font-size: 15px;
  font-weight: bold;
  margin: 10px auto;
}

.required {
  color: red;
}

/deep/ .mailTable .el-form-item {
  margin-bottom: 0;
}

/deep/ .mailTable .el-form-item__content {
  line-height: 0;
}

.comments {
  max-width: 80px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin: 0 auto;
}

/*滚动条样式start*/
::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

::-webkit-scrollbar-button {
  width: 0;
  height: 0;
}

::-webkit-scrollbar-thumb {
  min-height: 28px;
  padding-top: 100;
  background-color: rgba(0, 0, 0, .1);
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  border-radius: 6px;
  -webkit-box-shadow: inset 1px 1px 0 rgb(0 0 0 / 10%), inset 0 -1px 0 rgb(0 0 0 / 7%);
}

/*滚动条样式end*/

#table1 {
  table-layout: fixed;
}

/* 设置头部的所有单元格为粘性定位 以及其它属性 */
#table1 thead tr td {
  position: sticky;
  left: 0;
  top: 0;
  background: #fff;
  border: none;
  outline: 1px solid #E6EAEE;
}

#table1 thead tr.header_two td {
  top: 35px;
}

/* 设置头部的第一个单元格 */
/* #table1 thead tr td:first-child {
  z-index: 2;
} */

/* #table1 thead tr.header_two td:nth-child(2) {
  left: 120px;
  z-index: 2;
} */

/* 设置内容区的第一列单元格 */
/* #table1 tbody tr td.col {
  position: sticky;
  left: 0;
  z-index: 0;
  background: #fff;
  border: none;
  outline: 1px solid #E6EAEE;
} */

/* #table1 tbody tr td.col-left:nth-child(2), #table1 tbody tr td.col-left2 {
  left: 120px;
} */
/* #table1 tbody tr td.col-left:nth-child(2), #table1 tbody tr td.col-left2 {
  left: 120px;
} */

.sticky-header {
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0; /* 设置在顶部 */
  background-color: #f9f9f9; /* 设置背景色，以便于区分 */
  z-index: 1000; /* 确保位于其他内容之上 */
}

/* 可选: 为了确保在不支持 position: sticky 的浏览器上也能有良好的用户体验，可以添加一些回退处理 */
@supports ((position: -webkit-sticky) or (position: sticky)) {
  .sticky-header {
    position: sticky;
    top: 0;
  }
}

.table-container {
  height: 500px;
  /* 设置固定高度 */
  overflow-y: auto;
  /* 开启垂直滚动条 */
}

.table-container table {
  width: 100%;
  /* 表格宽度 */
  border-collapse: collapse;
  /* 边框合并 */
}

.name-green {
  color: green;
}

.name-blue {
  color: blue;
}

/* 其他表格样式 */
</style>
